<template>
    <div style="display: flex;">
        <div >
        <div style="display: flex;">
        <el-card  class="card">
           <template #header>轮播图一</template>
            <img
            v-if="images.length > 0"
            :src=" path.image + images[0].url"
            class="img"
            />
        </el-card>
         <el-card  class="card">
           <template #header>轮播图二</template>
            <img
            v-if="images.length > 0"
            :src="path.image + images[1].url"
            class="img"
            />
        </el-card>
    </div>
        <div style="display: flex;">
         <el-card  class="card">
           <template #header>轮播图三</template>
            <img
            v-if="images.length > 0"
            :src="path.image + images[2].url"
            class="img"
            />
        </el-card>
         <el-card  class="card">
           <template #header>轮播图四</template>
            <img
            v-if="images.length > 0"
            :src="path.image + images[3].url"
            class="img"
            />
        </el-card>
    </div>
    </div>
      <div class="table">
         <el-table :data="images" style="width: 100%">  
          <el-table-column prop="url" label="URL" width="350px" />  
          <el-table-column label="OPERATE" width="auto">
            <template #default="scoped">    
          <el-button @click="showChangeDialog(scoped.row.id)">更改</el-button>  
            </template>  
            </el-table-column>  
        </el-table>  
      </div>
    </div>
     <el-dialog  
      :v-if="dialog.show"
      title="更改图片信息"  
      v-model="dialog.show"
      draggable  
      width="180px">  
        <div style="width: 150px;  height: 160px;overflow: hidden;">
          <el-form >
            <el-upload
            v-model:file-list="fileList"
            :auto-upload="false"
            action="#"
            :limit="1"
            list-type="picture-card"
            :on-change="uploadFile"
            :on-remove="removeFile"
            :close-on-click-modal="false">
            <el-icon><PictureFilled /></el-icon>
          </el-upload>
          </el-form>
          </div>
          <div class="sub-button">
            <el-button @click="change()">更新</el-button>
          </div>
    </el-dialog>  
</template>
<script setup>
import { ref,reactive } from 'vue';
import { get,post } from '@/plugins/axios';
import { PictureFilled } from '@element-plus/icons-vue'
import path from './path';
const images = ref([])
const dialog = reactive({
    show: false,
    id:'',
    file:null
})
getTableData()
// 获取数据
function getTableData(){
    get(path.get,null,content => {
      images.value = content   
    })
}
function showChangeDialog(id){
    dialog.show = true
    dialog.id = id
}
function change(){
    if(dialog.file == null){
       ElMessage({
         message: '请选择图片',
         type: 'warning',
  })
  return 
    }
    post(path.update,{id: dialog.id,file:dialog.file},content => {
        getTableData()
        dialog.show = false
    })
}
function uploadFile(file) {
  dialog.file = file.raw
}
function removeFile(){
  dialog.file = null
}
</script>
<style scoped lang='scss'>
 .card{
    width: 400px;
    height: 250px;
    margin-top: 50px;
    margin-left: 50px;
 }
 .img{
    margin-top: 50;
    width: 100%;
    }
 .table{
    margin-top: 50px;
    margin-left: 50px;
    width: 500px;
 }
 .avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: c
  }
.sub-button{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>